<template>
<Loading />


  <div class="userinfo">
    <Header
    class="userinfo-header"
    />
    <VideoBackground/>
    <div class="userinfo-introduce">
      <div class="userinfo-introduce-header">
        <div class="userinfo-introduce-header-title">
          <ul>
            <li>
              <div class="userinfo-introduce-header-icon">
                <a href="https://www.facebook.com/"><img src="/icons/facebook.svg" alt="facebook"></a>
                <a href="https://gitee.com/Lin_X1999/vue/tree/master/Official_Website"><img src="/icons/github-line.svg" alt="instagram"></a>
                <a href="https://twitter.com/"><img src="/icons/twitter.svg" alt="twitter"></a>
              </div>

            </li>
            <li class="userinfo-introduce-header-text">
              <div style="width: 400px;">
                <h1>Hi</h1>
                <h3>Nice to meet you</h3>
                <p>I'm a full stack developer with over 5 years of experience.</p>
                <span>
                  Proficient in Python, Shell, JavaScript, familiar with SpringBoot
                  SpringCloud microservice framework, familiar with Dockerfile/YAML file writing, dimension
                  OBSBOT - Connecting You to the Future
                  [Official],Version control, personal experience with full-stack development, Vue3+django
                  Independently
                </span>
                <div style="display: flex; justify-content: space-between; margin-top:50px">
                  <a>
                    <AnimateNumber1/>
                    <span>Work experience</span>
                  </a>
                  <a>
                    <AnimateNumber2/>
                    <span>Personal front-end project</span>
                  </a>
                  <a>
                    <AnimateNumber3/>
                    <span>Completed Project</span>
                  </a>
                </div>
              </div>
              <div class="submit-container">
                <div>
                  <el-button  size="large" style="width: 150px; margin-top: 2rem; color: white; margin-right: 70px;" @click="scrollDown">
                    CONTACT ME
                  </el-button>
                </div>
                <div>
                  <el-button  size="large" style="width: 150px; margin-top: 2rem; color: white;"  @click="download">
                    DOWNLOAD PDF
                  </el-button>
                </div>
              </div>
            </li>
            <li>
              <!-- @mouseover="AvatarMouseover" @mouseleave="AvatarMouseleave" -->
              <div class="avatar-container" @mouseover="AvatarMouseover" @mouseleave="AvatarMouseleave">
                <a herf="#"><img src="/images/Weixin Image_20240521174823.jpg" alt="Avatar"></a>
                <div class="avatar-container-title">
                  <span>Xie Lin Cai</span><br>
                  <span>Full Stack Developer</span><br>
                  <div class="avatar-container-icon">
                    <a href="https://www.facebook.com/"><img src="/icons/facebook.svg" alt="facebook"></a>
                    <a href="https://gitee.com/Lin_X1999/vue/tree/master/Official_Website"><img src="/icons/github-line.svg" alt="instagram"></a>
                    <a href="https://twitter.com/"><img src="/icons/twitter.svg" alt="twitter"></a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
    </div>


    <div class="Scrolldown">
      <a><img src="/icons/Scrolldown/scrolldown.svg" alt="Scrolldown"></img></a>
    </div>
    

    <div class="user_indrouce_list">
      <h1 style="margin-bottom: 30px;">Professional Skill information</h1>
      <div class="introduce-list">
        <ul>
          <li>
            <Fold1/>
          </li>
          <li>
            <Fold2/>
          </li>
          <li>
            <Fold3/>
          </li>
          <li>
            <Fold4/>
          </li> 
        </ul>
      </div>
    </div>

    <div class="user_indrouce_list_experience">
      <div class="user_indrouce_list_experience user_indrouce_list_qualification">
        <h1>qualification</h1>
        <span>Personal resume</span>
        <ul>
          <li>
            <div class="common-layout">
              <el-container>
                <el-header>
                  <ul style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                    <li><div><a v-on:click="education_button"  style="cursor: pointer;" class="education_button">education</a></div></li>
                    <li><div><a v-on:click="work_experience_button" style="cursor: pointer;" class="work_experience_button">work experience</a></div></li>
                  </ul>
                </el-header>
                <el-main>
                  <ul>
                    <li class="education">
                      <el-timeline>
                        <el-timeline-item
                          v-for="(activity, index) in activities"
                          :key="index"
                          :icon="activity.icon"
                          :type="activity.type"
                          :color="activity.color"
                          :size="activity.size"
                          :hollow="activity.hollow"
                          :timestamp="activity.timestamp"
                        >
                          <p>{{ activity.content }}</p>
                          <p>{{ activity.major }}</p>
                        </el-timeline-item>
                      </el-timeline>
                    </li>
                    
                    <li class="work-experience">
                      <el-timeline>
                        <el-timeline-item timestamp="2019 - 2020" placement="top" type='primary'>
                          <el-card>
                            <h4>Company: Sunshine and Rain Dew</h4>
                            <p>Position: Operations Engineer</p>
                          </el-card>
                        </el-timeline-item>

                        <el-timeline-item timestamp="2020 - 2022" placement="top" color='#0bbd87' type='primary'>
                          <el-card>
                            <h4>Company：Hangsheng Technology Co., Ltd</h4>
                            <p>Position: Operations Engineer</p>
                          </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2022-Nowadays" placement="top" color='#03bd87' type='primary'>
                          <el-card>
                            <h4>Company：Ruimo Intelligent Technology Co., Ltd</h4>
                            <p>Position: Devops Devlpment</p>
                          </el-card>
                        </el-timeline-item>
                        <el-timeline-item  placement="top" color='#03bd87' type='primary'>
                          <el-card>
                            <h4>.......</h4>
                          </el-card>
                        </el-timeline-item>
                        <el-timeline-item>
 
                        </el-timeline-item>
                      </el-timeline>
                    </li>
                  </ul>
                </el-main>
              </el-container>
            </div>
          </li>
        </ul>
      </div>
    </div>  


    <div class="carousel">
      <div>
        <h1>Project List</h1>
        <span>Personal resume</span>
        <Carousel/>
      </div>
    </div>


    <div class="line">
      <div class="line_down"></div>
    </div>
    <div class="user_indrouce_project_list">
      <div>
        <h1 style="margin-bottom: 1em">Project Experience</h1>
        <ul>
          <li>
            <h3>K8s架构设计,环境搭建及服务部署</h3>
            <span>
              From 0 to 1, one person completes the K8s cluster construction.
              Infrastructure used: Alibaba Cloud ACK, Tencent CloudTKE, 
              and self-built K8s, the environment is configured as one master and three slaves,
              Main deployment company website project: front-end nuxt2 project to
              And the backend springcloud project, each with 3 features
              pod, using the image rolling publishing deployment service, improve the service
              Load balancing and high availability and continuity are achieved without feeling more
              For the new version of the effect, use ingress-nginx exposure suit
              Business, all services are personally developed yaml file department
              Sign.
            </span>
          </li>
          <li>
            <h3>搭建及规范CI/CD流程</h3>
            <span>
              Jenkins>Sonarqube>Maven>Code
              up> Alibaba Cloud Image Service ACR>docker/k8s, through
              Have written Jenkinsfile script to integrate various tools to achieve
              Automated deployment services greatly improve development/testing /
              Delivery speed of deployment.
            </span>
          </li>
          <li>
            <h3>管理云平台</h3>
            <span>
              Mainly maintain Ali Cloud, Tencent Cloud, Amazon cloud,
              All are public clouds, three cloud environments are my personal maintenance, package
              Including: environment construction, service deployment, resource maintenance, cost preestimation
              Calculation, docking after-sales support, etc.
            </span>
          </li>

          <li>
            <h3>全栈开发</h3>
            <span>
              Personal experience in full-stack development, proficient in django
              And nxut3/vue3 framework, independently developed and deployed
              Website project:<br>
            </span>
            <div class="user_demo_list">
              demo1: <a href="https://www.starbucket.xyz/">Lin | Store</a><br>
              demo2: <a href="https://insta360.starbucket.xyz/">Lin | Insta360</a><br>
              demo3: <a href="http://8.137.150.77:3301">Lin | User</a>
            </div>
          </li>
        </ul>
      </div>  
    </div>

    <Book
    class="user-book"
    />
    



    <div class="back">
      <a :class="{'at-top': attop}" href="/"><img src="/icons/arrow-left-line.svg"></a>
      <a :class="{'at-top': attop}" href="#"><img src="/icons/arrow-right-line.svg"></a>
    </div>

    <Footer
    class="user-footer"
    />

  </div>

  </div>

  


</template>  



<script lang="ts">
import { gsap } from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MoreFilled } from '@element-plus/icons-vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
import { Application } from 'pixi.js';


export default defineComponent ({
   async setup(){
    const data = reactive({
      ACTIVE: 'active',
      attop: ref(true),
      timer: ref(),
      backgrounVideoTime: ref(),
      AvatarMouseover: ref(true),
      activities: [
        {
          content: 'Shenzhen University',
          major: '工商管理',
          timestamp: '2025-05',
          size: 'large',
          type: 'primary',
          icon: MoreFilled,
        },
        {
          content: 'Lanzhou University',
          major: '计算机应用技术',
          timestamp: '2022-04',
          size: 'large',
          color: '#0bbd87',
          type: 'primary',
        },
        {
          content: 'Shuanglong Vocational and Technical School',
          major: '计算机应用技术',
          timestamp: '2018-06',
          size: 'large',
          type: 'primary',
          hollow: true,
        },
        {
          content: '......',
          timestamp: '......',
          size: 'large',
          type: 'primary',
          hollow: true,
        },
      ],
      isScrolling: false

    })
    gsap.registerPlugin(ScrollTrigger)
    
    const tween = gsap.timeline({
      delay: 0.8,
    })


    

    // 防抖函数，防止执行多次函数
    const debounce = (func: { (): void; apply?: any; }, delay: number | undefined) => {
      data.timer = null;
      return () => {
          clearTimeout(data.timer);
          data.timer = setTimeout(() => {
              func.apply(this, arguments);
          }, delay);
      };
    }




    const scrollHandler = async() => {
      const triggerPosition = document.querySelector('.user-footer').getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      // 如果目标 div 出现在视窗内
      if (triggerPosition < windowHeight) {
        // 执行目标 div 出现后的动画
        tween.to('.back', {duration: 1, ease: "power2-in", alpha: 1, x: 0})
      }
      else{
        tween.to('.back', {duration: 1, ease: "power2-out", alpha: 0, x: 0})
      }
    }
    const handleScrollDebounce = debounce(scrollHandler, 200);



    const GSAP = () => {
      tween.from('.userinfo-introduce-header-title ul li:nth-child(1)', {duration: 0.5, ease: 'power2', autoAlpha: 0, x: -40})
      tween.from('.userinfo-introduce-header-title ul li:nth-child(2)', {duration: 0.5, ease: 'power2', autoAlpha: 0, y: -40})
      tween.from('.userinfo-introduce-header-title ul li:nth-child(3)', {duration: 0.5, ease: 'power2', autoAlpha: 0, x: 40})
      tween.from(".footer", {duration: 0.5, ease: 'power2.out', autoAlpha: 0, y: 40})
      tween.to('.userinfo-introduce-header-title ul li:nth-child(2)', {duration: 0.5, ease: 'power2', autoAlpha: 1, y: 0})
      tween.to('.userinfo-introduce-header-title ul li:nth-child(3)', {duration: 1, ease: 'power2', autoAlpha: 1, x: 40})
      tween.to('.userinfo-introduce-header-title ul li:nth-child(1)', {duration: 0.5, ease: 'power2', autoAlpha: 1, x: 0})
      tween.to(".footer", {duration: 0.5, ease: 'power2.out', autoAlpha: 1, y: 0})
    }

    const scrollToTop = async() => {
      gsap.from(".line_down", {
        scaleX: 0,
        opacity: 0,
        transformOrigin: "left center",
        ease: "none",
        scrollTrigger: {
          trigger: ".carousel",
  
          end: "+=100%",
          scrub: true,
          onEnter: (self) => {
            gsap.to('.line_down',{
              duration: 3,
              scaleX: 1,
              ease: "none",
              opacity: 0.5,
            })
          },
        },
      });
      gsap.from('.user_indrouce_project_list',
      {
        duration: 0.5,
        ease: "power3.out",
        opacity: 0,
        y: 100,
        autoKill: false,
        scrollTrigger: {
          trigger: '.carousel',
          start: "top top",
          end:'center center',
          toggleActions: "play none none reverse",
          scrub: true,
          onEnter: (self) => {
            gsap.to('.user_indrouce_project_list',{
              ease: "power3.out",
              duration: 0.5,
              opacity: 1,
              y: 0,
            })
          },
        }
      });
    }



    const education_button = async() => {
      tween.to(".work-experience", {duration: 0.3, ease: 'power2', display: "none", x: 50})
      tween.from(".education", {duration: 0.3, ease: 'power2', display: "none", x: -50})
      tween.to(".education", {duration: 0.3, ease: 'power2', display: "flex", x: 0})
    }



    const work_experience_button = async() => {
      tween.to(".education", {duration: 0.3, ease: 'power2', display: "none", x: -50})
      tween.from(".work-experience", {duration: 0.4, ease: 'power2', display: "none", x: -50})
      tween.to(".work-experience", {duration: 0.4, ease: 'power2', display: "flex", x: 0})
    }




    const download = () => {
      const fileUrl = '/template/template.pdf'
      const link = document.createElement('a');
      link.href = fileUrl;
      link.setAttribute('download', 'template.pdf'); // 设置下载文件的名称
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }


    const userinfoheader = async() => {
      const scrollHeight = window.scrollY  || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollHeight)
      if (scrollHeight == 0){
        tween.to(".userinfo-header", {duration: 0.3, ease: 'power2.out', opacity: 0, y: -50}) 
      }
      else {
        tween.to(".userinfo-header", {duration: 0.3, ease: 'power2', opacity: 0.5, y: 0})
      }
    }
    


    const scrollDown = () => {
      window.scrollTo(0, document.documentElement.scrollHeight)
    }



    const AvatarMouseover = async(index: any) => {
      if(data.AvatarMouseover){
        tween.fromTo(".avatar-container-title",
          {duration: 0.1, ease: 'power2', opacity: 0, y: 100},
          {duration: 0.5, ease: 'power2', opacity: 1, y: 0}
        )
        document.querySelectorAll(".avatar-container-title span").forEach((item: any, index: any) => {
          tween.fromTo(item, {
            duration: 0.2, ease: 'power2', opacity: 0, y: 100,
          },
          {
            duration: 0.2, ease: 'power2', opacity: 1, y: 0, delay: index * 0.1
          })
        })

        document.querySelectorAll(".avatar-container-icon a").forEach((item: any, index: any) => {
        tween.to(item, {
          duration: 0.2, ease: 'power2', opacity: 1, y: 0,
          delay: index * 0.1
        })
      })
      }
      data.AvatarMouseover = false
    }


    const AvatarMouseleave = async() => {
      document.querySelectorAll(".avatar-container-title span").forEach((item: any, index: any) => {
        tween.to(item, {
          duration: 0.1, ease: 'power2', opacity: 0, y: -100,
        })
      })

      document.querySelectorAll(".avatar-container-icon a").forEach((item: any, index: any) => {
        tween.to(item, {
          duration: 0.1, ease: 'power2', opacity: 0, y: 0,
        })
      })

      tween.to(".avatar-container-title",
      {duration: 0.1, ease: 'power2', opacity: 0, y: 100},
      )
      data.AvatarMouseover = true
    }

    const mouseScroll = async() => {
      if(window.scrollY > 0){
        tween.to('.Scrolldown', {
          duration: 1, ease: 'power2', opacity: 0, y: 100,
        })
      }
      else if (window.scrollY === 0){
        tween.to('.Scrolldown', {
          duration: 1, ease: 'power2', opacity: 1, y: 0,
        })
      }
      
    }
    const mouseScrollDebounce = debounce(mouseScroll, 500);
    const userinfo_headerDebounce = debounce(userinfoheader, 200);


    onMounted(() => {
      GSAP()
      scrollHandler()
      userinfoheader()
      mouseScrollDebounce()
      window.addEventListener('scroll', handleScrollDebounce);
      window.addEventListener('scroll', scrollToTop);
      window.addEventListener('scroll', userinfo_headerDebounce);
      window.addEventListener('scroll', mouseScrollDebounce);
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', scrollToTop);
      window.removeEventListener('scroll', handleScrollDebounce);
      window.removeEventListener('scroll', mouseScrollDebounce);
    });


    
    return {
      ...toRefs(data),
      education_button,
      work_experience_button,
      download,
      scrollDown,
      AvatarMouseover,
      AvatarMouseleave,
    }
  }
})

</script>


<style scoped>
* {
  color: white ;
}

:root {
  --button-width: 200px;
  --border-width: 1px;
  --clip-width: 30px;
  --button-color: #fed75a;
}

.userinfo-introduce {
  position: relative;
  height: 100%;
  width: auto;
  height: calc(100vh - 2 * var(--main-structure-left));
  scroll-behavior: smooth;
}

.userinfo-introduce-header,
.user_indrouce_list_experience {
  width: 100%;
  height: 800px;
  margin-top: 4em;
}

.userinfo-introduce-header-title ul {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}



.userinfo-introduce-header-title ul li {
  visibility: hidden;
}

.userinfo-introduce-header-title ul li a:hover {
  transition:  all 0.5s;
  transform:  translateY(-5px);
}



.userinfo-introduce-header ul li:not(:last-child) {
  margin-right: 150px;
}

.userinfo-introduce-header-icon {
  display: grid;
  grid-template-columns: 1fr; /* 定义一列 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.userinfo-introduce-header-icon a {
  margin-top: 1rem;
  filter: invert(1);
}

.avatar-container {
  position: relative;
  width: 300px;      
  height: 400px;
  border-radius: 50%; 
  overflow: hidden;
  transform: all 0.5s;
}

.avatar-container img {
  width: 100%;      
  height: 100%; 
  object-fit: cover; 
}

.avatar-container:hover {
  cursor: pointer;
  /* animation: animate ease-in-out 2s infinite; */
}

.avatar-container-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 220px;
  background-color: rgba(0, 0, 0, 0.5); 
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  backdrop-filter: blur(3px);
  text-align: center;
  opacity: 0;
  line-height: 2rem;
}

.userinfo-header,
.avatar-container-title span {
  opacity: 0;
}

.avatar-container-icon {
  margin-top: 1rem;
}

.avatar-container-icon img{
  filter: invert(1);
  transition: transform 0.5s;
  width: 20px;
}

.avatar-container-icon a:not(:last-child) {
  margin-right: 2rem;
}

.submit-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all  .5s;
}

.submit-container button {
  transition: transform 1s, background-position 0.5s, color 0.3s;
  background: none;
}
.submit-container button:hover {
  color: transparent;
  font-weight: bold;
  background: linear-gradient(to right, #00CCFF, yellow, green, violet);
  background-size: 200% 100%;
  background-clip: text; /* 将背景仅剪裁到文字 */
  cursor: pointer; 
  -webkit-background-clip: text; /* Chrome/Safari 兼容 */
  -webkit-text-fill-color: transparent; /* 使文字颜色透明，显示背景 */
  background-position: left;
  box-sizing: border-box;
}



.user_indrouce_list,
.user_indrouce_list_experience{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.introduce-list div {
  width: 800px;
  height: auto;
  /* background-color: var(--main-color); */
  opacity: 1;
  margin-bottom: 30px;
  border-radius: 15px;
  transition: 0.5s all;
  align-items: center;
}

.common-layout ul {
  margin-top: 10px;
}


.common-layout .work-experience{
  display: none;
}

.common-layout .work-experience {
  margin-left: 50px;
}

.common-layout .education {
  margin-left: 150px;
}
.common-layout .education,
.user_indrouce_project_list.active{
  display: flex;
}

.el-card:nth-child(1){
  --el-card-bg-color: none;
}


.carousel,
.user_indrouce_project_list,
.line {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.user_indrouce_project_list {
  opacity: 0;
  transition: all 0.5s ease;
  margin-top: 5em;
}



.user_indrouce_project_list ul {
  height: 50vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user_indrouce_project_list ul li{
  width: 400px;
  height: 319px;
}


.user_indrouce_project_list ul li:not(:last-child) {
  margin-right: 50px;
}

.user_indrouce_project_list ul li {
  text-align: start;
}

.user_indrouce_project_list ul li h3 {
  text-align: center;
}

.user_demo_list{
  font-size: 12px;
  transition: all 0.3s ease;
}


.line_down{
  width: 100%;
  max-width: 800px;
  height: 8px;
  margin: 20px 0 10px 0;
  position: relative;
  display: inline-block;
  align-items: center;
  background-color: rgb(246, 246, 246);
  border-radius: 15px;
  opacity: 0.5;
}












</style>